<template>
  <scroll-view 
    class="page-container" 
    scroll-y 
    :show-scrollbar="false"
  >
    <!-- 顶部搜索框 -->
    <uni-search-bar 
      v-model="searchValue"
      placeholder="QQ号/QID/手机号/群" 
      :bg-color="'#F5F5F5'" 
      :border="false"
      :radius="16"
      cancel-button="none"
      @input="handleSearch"
    ></uni-search-bar>

    <!-- 搜索结果展示区域 -->
    <view class="search-result" v-if="showSearchResult">
      <!-- 用户结果 -->
      <view class="result-section" v-if="userResults.length > 0">
        <view class="section-title">用户</view>
        <view 
          class="user-item" 
          v-for="(user, index) in displayedUserResults" 
          :key="index"
          @click="handleUserClick(user, index)"
          @touchstart="setUserActive(index)"
          @touchend="resetUserActive"
          @touchcancel="resetUserActive"
          :class="{ 'active': userActiveIndex === index }"
        >
          <image :src="user.avatar" class="avatar"></image>
          <view class="user-name">{{ user.name }}</view>
        </view>
        <view class="more-btn" v-if="userResults.length > 3" @click="showAllUser = !showAllUser">
          {{ showAllUser ? '收起部分结果' : '查看更多用户结果' }}
        </view>
      </view>

      <!-- 群聊结果 -->
      <view class="result-section" v-if="groupResults.length > 0">
        <view class="section-title">群聊</view>
        <view 
          class="group-item" 
          v-for="(group, index) in displayedGroupResults" 
          :key="index"
          @click="handleGroupClick(group, index)"
          @touchstart="setGroupActive(index)"
          @touchend="resetGroupActive"
          @touchcancel="resetGroupActive"
          :class="{ 'active': groupActiveIndex === index }"
        >
          <image :src="group.avatar" class="avatar"></image>
          <view class="group-info">
            <view class="group-name">{{ group.name }}</view>
            <view class="group-meta">{{ group.memberCount }}人</view>
            <view class="group-desc">{{ group.desc }}</view>
          </view>
        </view>
        <view class="more-btn" v-if="groupResults.length > 3" @click="showAllGroup = !showAllGroup">
          {{ showAllGroup ? '收起部分结果' : '查看更多群聊结果' }}
        </view>
      </view>
    </view>

    <!-- 功能图标区域（搜索时有内容则隐藏） -->
    <view 
      class="icons-grid" 
      :style="{ display: isSearching ? 'none' : 'flex' }"
    >
      <view 
        class="icon-item" 
        v-for="(item, index) in iconsList" 
        :key="index"
        @click="handleItemClick(item)"
        @touchstart="setActive(index)"
        @touchend="resetActive"
        @touchcancel="resetActive"
        :class="{ 'active': activeIndex === index }"
      >
        <view class="icon-wrapper">
          <uni-icons 
            :type="item.iconType" 
            :size="40" 
            color="#000"
          ></uni-icons>
        </view>
        <view class="item-text">{{ item.text }}</view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 功能图标数据
const iconsList = ref([
  { iconType: 'contact', text: '手机联系人' },
  { iconType: 'scan', text: '扫一扫' },
  { iconType: 'personadd', text: '面对面添加' },
  { iconType: 'search', text: '条件查找' },
  { iconType: 'staff', text: '面对面建群' },
  { iconType: 'location', text: '附近的人' },
  { iconType: 'chatboxes', text: '结伴交友' }
]);

// 搜索相关状态
const searchValue = ref('');
const isSearching = computed(() => !!searchValue.value.trim());
const showSearchResult = ref(false);

// 用户结果相关
const userResults = ref([]); 
const showAllUser = ref(false);
const userActiveIndex = ref(-1); // 用户项点击状态

// 群聊结果相关
const groupResults = ref([]); 
const showAllGroup = ref(false);
const groupActiveIndex = ref(-1); // 群聊项点击状态

// 统一使用本地静态图片路径
const staticLogoPath = '/static/logo.png';

// 模拟接口请求获取搜索结果
const handleSearch = async () => {
  const value = searchValue.value.trim();
  if (value) {
    showSearchResult.value = true;
    userResults.value = [
      { avatar: staticLogoPath, name: '清风(1032388015)' },
      { avatar: staticLogoPath, name: '清风(1038150571)' },
      { avatar: staticLogoPath, name: '♀清风亦清风♂(1309818···)' },
      { avatar: staticLogoPath, name: '测试用户' }
    ];
    groupResults.value = [
      { avatar: staticLogoPath, name: '清风交流群', memberCount: 94, desc: '群主很懒，还没有群介绍哦~' },
      { avatar: staticLogoPath, name: '清风公益合击', memberCount: 402, desc: '群主很懒，还没有群介绍哦~' },
      { avatar: staticLogoPath, name: '清风别苑', memberCount: 328, desc: '群主很懒，还没有群介绍哦~' },
      { avatar: staticLogoPath, name: '测试群聊', memberCount: 50, desc: '这是测试群聊简介' }
    ];
  } else {
    showSearchResult.value = false;
    userResults.value = [];
    groupResults.value = [];
  }
  console.log('搜索内容：', searchValue.value);
};

// 控制显示的用户结果数量
const displayedUserResults = computed(() => {
  return showAllUser.value ? userResults.value : userResults.value.slice(0, 3);
});

// 控制显示的群聊结果数量
const displayedGroupResults = computed(() => {
  return showAllGroup.value ? groupResults.value : groupResults.value.slice(0, 3);
});

// 用户项点击事件
const handleUserClick = (user, index) => {
  console.log("点击用户：", user.name);
  uni.navigateTo({
  	url:"/pages/chat/ApplyFriend"
  })
  // 这里可以添加跳转用户详情页等逻辑
};

// 群聊项点击事件
const handleGroupClick = (group, index) => {
  console.log("点击群聊：", group.name);
  // 这里可以添加跳转群聊详情页等逻辑
  uni.navigateTo({
  	url:"/pages/chat/GroupInfo"
  })
};

// 用户项点击效果管理
const setUserActive = (index) => {
  userActiveIndex.value = index;
};

const resetUserActive = () => {
  setTimeout(() => {
    userActiveIndex.value = -1;
  }, 200);
};

// 群聊项点击效果管理
const setGroupActive = (index) => {
  groupActiveIndex.value = index;
};

const resetGroupActive = () => {
  setTimeout(() => {
    groupActiveIndex.value = -1;
  }, 200);
};

// 原功能图标点击事件
const handleItemClick = (item) => {
  console.log("点击功能：", item.text);
};

// 原功能图标点击效果管理
const activeIndex = ref(-1);
const setActive = (index) => {
  activeIndex.value = index;
};

const resetActive = () => {
  setTimeout(() => {
    activeIndex.value = -1;
  }, 200);
};
</script>

<style lang="less" scoped>
/* 最外层滚动容器样式 */
.page-container {
  width: 100%;
  height: 100vh; 
  background-color: #fff;
  box-sizing: border-box;
  padding: 16rpx;
  /* 隐藏滚动条 */
  ::-webkit-scrollbar {
    display: none !important;
  }
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.uni-search-bar {
  --search-bar-height: 72rpx;
  --search-icon-size: 32rpx;
  --placeholder-color: #999;
  --border-radius: 16rpx;
}

.search-result {
  margin-top: 20rpx;
}

.result-section {
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  color: #999;
  padding: 10rpx 0;
  margin-left: 20rpx;
}

/* 用户项点击效果 */
.user-item, .group-item {
  display: flex;
  align-items: center;
  padding: 15rpx 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
  transition: all 0.2s; /* 添加过渡动画 */
}

.user-item.active, .group-item.active {
  transform: scale(0.98);
  opacity: 0.9;
  background-color: #f8f8f8; /* 点击时背景色变化 */
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

/* 用户名单行溢出隐藏 */
.user-name {
  font-size: 32rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-info {
  flex: 1;
  min-width: 0;
}

/* 群名称单行溢出隐藏 */
.group-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-meta {
  font-size: 24rpx;
  color: #999;
  margin-top: 2rpx;
}

/* 群简介单行溢出隐藏 */
.group-desc {
  font-size: 26rpx;
  color: #666;
  margin-top: 5rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.more-btn {
  text-align: center;
  color: #07c160;
  font-size: 28rpx;
  padding: 20rpx 0;
}

.icons-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-top: 32rpx;
}

.icon-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
  text-align: center;
  transition: all 0.2s;

  .icon-wrapper {
    width: 64rpx;
    height: 64rpx;
    margin-bottom: 12rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
  }

  .item-text {
    font-size: 28rpx;
    color: #333;
  }

  &.active {
    transform: scale(0.95);
    opacity: 0.8;
  }
}
</style>